<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :model="form" :label-col="{ style: { width: '150px' } }">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="商家ID">
              <a-input allowClear disabled class="per100" placeholder="请输入" v-model="form.id" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="手机号码">
              <a-input allowClear :disabled="!isAdmin" class="per100" placeholder="请输入" v-model="form.phone" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="姓名">
              <a-input allowClear placeholder="请输入" v-model="form.realname" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="性別">
              <j-dict-select-tag allowClear v-model="form.sex" placeholder="请选择" dictCode="sex" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="昵称">
              <a-input allowClear placeholder="请输入" v-model="form.nickName" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="户主身份证">
              <a-input allowClear v-model="form.idCard" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="微信实名">
              <a-input allowClear placeholder="请输入" v-model="form.wechatRealname" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="QQ号码">
              <a-input allowClear placeholder="请输入" v-model="form.qqNum" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="EMAIL">
              <a-input allowClear placeholder="请输入" v-model="form.email" />
            </a-form-item>
          </a-col>
          <div v-if="!isAdmin">
            <a-col :sm="24" :md="24" :xl="16">
              <a-form-item label="网点区域">
                <a-row :gutter="5" :style="{ 'margin-bottom': 0, 'vertical-align': 'top' }">
                  <a-col :span="6">
                    <a-select
                      placeholder="请选择省"
                      v-model="form.provinceCode"
                      @change="(e, data) => addressChange(e, 'cityOptions', 'province', data.key)"
                    >
                      <a-select-option v-for="item in provinceOptions" :key="item.name" :value="item.code">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="6">
                    <a-select
                      placeholder="请选择市"
                      v-model="form.cityCode"
                      @change="(e, data) => addressChange(e, 'areaOptions', 'city', data.key)"
                    >
                      <a-select-option v-for="item in cityOptions" :key="item.name" :value="item.code">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="6">
                    <a-select
                      placeholder="请选择区"
                      v-model="form.areaCode"
                      @change="(e, data) => addressChange(e, 'streetOptions', 'area', data.key)"
                    >
                      <a-select-option v-for="item in areaOptions" :key="item.name" :value="item.code">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="6">
                    <a-select
                      placeholder="请选择街道"
                      v-model="form.streetCode"
                      @change="(e, data) => addressChange(e, '', 'street', data.key)"
                    >
                      <a-select-option v-for="item in streetOptions" :key="item.name" :value="item.code">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="详细地址">
                <a-input allowClear placeholder="请输入" v-model="form.address" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="邮编">
                <a-input allowClear placeholder="请输入" v-model="form.postalCode" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="创建日期">
                <a-date-picker show-time class="per100" v-model="form.createTime" disabled valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="最后登录时间">
                <a-date-picker show-time class="per100" v-model="form.lastLoginTime" disabled valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="账户状态">
                <j-dict-select-tag disabled allowClear v-model="form.status" placeholder="请选择" dictCode="status" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="代理商状态">
                <j-dict-select-tag disabled allowClear v-model="form.delFlag" placeholder="请选择" dictCode="delFlag" />
              </a-form-item>
            </a-col>
          </div>
          <a-col :sm="24" :md="12" :xl="24">
            <a-form-item label=" " :colon="false">
              <a-button type="primary" :loading="loading" @click="onSubmit">提交</a-button>
              <a-button style="margin-left: 8px" :loading="loading" @click="closeCurrent()">返回</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-card>
</template>

<script>
import store from '@/store/'
import CommonApi from '@/api/Common/index'
import { httpAction, getAction } from '@/api/manage'
const Api = {
  queryId: '/sys/user/queryById'
}

export default {
  name: 'DeviceUpdate',
  inject: ['closeCurrent'],
  data() {
    return {
      form: {
        id: 0, // 商家id
        provinceCode: '', // 省
        cityCode: '', // 市
        areaCode: '', // 区
        streetCode: '', // 镇
        phone: '', // 手机号
        realname: '', // 姓名
        sex: undefined, // 性别
        nickName: undefined, // 昵称
        idCard: undefined, // 身份证
        wechatRealname: '', // 微信实名
        qqNum: '', // QQ号码
        email: '', // 电子邮件EMAIL
        createTime: '', // 创建日期
        lastLoginTime: undefined, // 最后登录时间
        address: undefined, // 详细地址
        postalCode: undefined, // 邮编
        status: undefined, // 账户状态
        delFlag: undefined // 代理商状态
      },
      loading: false,
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      streetOptions: [],
      networkOptions: []
    }
  },
  created() {
    this.form.businessId = store.getters.userInfo.id
    // 获取地址
    this.getAddress('provinceOptions')
    this.getDetails()
  },
  computed: {
    isAdmin() {
      return !!store.getters.roles.find(item => {
        return item.roleCode === 'admin'
      })
    }
  },
  methods: {
    // 获取详情
    getDetails() {
      if (!Api.queryId) {
        this.$message.error('没有接口')
        return false
      }
      getAction(Api.queryId, { id: this.form.businessId })
        .then(res => {
          if (res.code === 0) {
            this.form = res.result
            if (this.form.provinceCode) {
              this.getAddress('cityOptions', { provinceCode: this.form.provinceCode })
            }
            if (this.form.cityCode) {
              this.getAddress('areaOptions', { cityCode: this.form.cityCode })
            }
            if (this.form.areaCode) {
              this.getAddress('streetOptions', { areaCode: this.form.areaCode })
            }
            if (this.form.streetCode) {
              this.getAddress('', { streetCode: this.form.streetCode })
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 获取地址
    getAddress(name, data) {
      getAction(CommonApi.addressList, data).then(res => {
        this[name] = res.result
      })
    },
    // 地址改变
    addressChange(e, name, key, cn) {
      this.form[`${key}Cn`] = cn
      let obj = {}
      // 改变重置后面市区镇
      if (key === 'province') {
        obj = {
          cityCode: '',
          cityCn: '',
          areaCode: '',
          areaCn: '',
          streetCode: '',
          streetCn: ''
        }
        this.cityOptions = []
        this.areaOptions = []
        this.streetOptions = []
      } else if (key === 'city') {
        obj = {
          areaCode: '',
          areaCn: '',
          streetCode: '',
          streetCn: ''
        }
        this.areaOptions = []
        this.streetOptions = []
      } else if (key === 'area') {
        obj = {
          streetCode: '',
          streetCn: ''
        }
        this.streetOptions = []
      }
      this.form = { ...this.form, ...obj }
      if (name && e) {
        this.getAddress(name, { [`${key}Code`]: e })
      }
    },

    // 提交
    onSubmit() {
      const url = '/sys/user/edit'
      const method = 'put'
      this.loading = true
      httpAction(url, this.form, method)
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            // this.closeCurrent()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped></style>

